<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>咨询列表</title>
<link rel="stylesheet" href="/wk1un2/Backstage/lib/layui/css/layui.css" />
</head>
<body>
	<div class="layui-form-item" style="margin-top: 20px;" onsubmit="false">
		<div class="layui-form-item">
			<label class="layui-form-label">咨询文章标题:</label>
			<div class="layui-input-inline" style="width: 120px;">
				<input type="text" name="title" id="txtName" class="layui-input">
			</div>
			<button class="layui-btn" id="search" data-type="reload">查询</button>
		</div>
	</div>
	<!--lay-filter="test"，给表格加的一个过滤器，当我有一个点击的操作-->
	<table class="layui-hide" id="test" lay-filter="test"></table>
	<!--数据表格-->
	<script type="text/html" id="toolbarDemo">
			<!--表头上面引入了一个添加咨询的操作-->
			<div class="layui-btn-container">
				<button class="layui-btn layui-btn-sm" lay-event="addNews">添加咨询</button>
			</div>
		</script>
	<script type="text/html" id="barDemo">
			<!--在表格的行内加的工具-->
			<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
			<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
		</script>
	<!--检查js文件是否引入成功-->
	<script type="text/javascript"
		src="/wk1un2/Backstage/lib/layui/layui.js"></script>
	<script>
		layui.use('table', function() { //加载表格模块
			var table = layui.table;
			var $ = layui.jquery;
			table.render({ //初始化数据表格的，（专业的叫法渲染表格）
				elem : '#test', //table的id
				toolbar : '#toolbarDemo', //开启头部工具栏
				//请求的地址
				url : '/wk1un2/HouNewsServlet', //请求服务器的连接地址
				where : {
					method : 'selectAllJson'
				},
				method : 'POST', //请求的方式
				cols : [ [ {
					field : 'id',
					title : '咨询ID',
					width : 85,
				}, {
					field : 'time',
					title : '发布时间',
					width : 150,
				}, {
					field : 'title',
					title : '文章标题',
					width : 230,
				}, {
					field : 'content',
					title : '文章内容',
					width : 400,
				}, {
					field : 'homeFlag',
					title : '是否显示主页',
					width : 140,
				}, {
					field : 'morecontent',
					title : '更多详情',
					width : 400,
				}, {
					field : 'names',
					title : '咨询所属分类',
					width : 140,
				}, {
					title : '操作',
					width : 140,
					toolbar : '#barDemo'
				} ] ],
				id : 'testReload',//写了一个Id，目的是一会从新加载表格用的
				page : true
			});
			table.on('toolbar(test)', function(obj) { //监听的是头部的工具栏，toolbar
				switch (obj.event) {
				case 'addNews':
					//							layer.msg('添加用户');
					layer.open({ //打开一个页面
						type : 2, //在当前的页面之上，弹框形式，展示出添加用户的界面
						area : [ '600px', '660px' ], //页面的宽高
						content : '/wk1un2/HouNewsServlet?method=selectadd', //页面所在的位置/wk1un2/HouNewsServlet?method=selectadd
						title : '添加咨询',
						end : function() {
							window.location.reload();//当窗口关闭之后刷新页面
						}
					});
					break;
				}
				;
			});
			table.on('tool(test)', function(obj) { //tool监听的是行内工具栏
				if (obj.event === 'del') {
					layer.confirm('真的删除么?', function(index) {
						var url = '/wk1un2/HouNewsServlet';//请求服务器的地址
						//确保数据没有问题就进行ajax提交了 obj.del();layer.close(index);
						$.post(url, {
							id : obj.data.id,
							method : 'delete'
						}, function(data) {
							if (data.count > 0) {
								console.log('删除成功');
								window.location.reload();//当窗口关闭之后刷新页面
							}
						}, "json");
					});
				} else if (obj.event === 'edit') {
					console.log(obj.data);
					layer.open({ //打开一个页面
						type : 2, //在当前的页面之上，弹框形式，展示出添加用户的界面
						area : [ '600px', '660px' ], //页面的宽高
						content : '/wk1un2/HouNewsServlet?method=select', //页面所在的位置/wk1un2/HouNewsServlet?method=select
						title : '编辑咨询',//标题
						success : function(layero, index) {
							var body = layer.getChildFrame('body', index);
							body.contents().find("#id").val(obj.data.id);
							body.contents().find("#time").val(obj.data.time);
							body.contents().find("#title").val(obj.data.title);
							body.contents().find("#content").val(obj.data.content);
							body.contents().find("#homeFlag").val(obj.data.homeFlag);
							body.contents().find("#morecontent").val(obj.data.morecontent);
							body.contents().find("#newsConsult").val(obj.data.newsConsult);
						},
						end : function() {
							window.location.reload();//当窗口关闭刷新页面
						}
					});
				}
			});

			//给search一个点击事件
			//当我执行点击的收走这个方法 search是button的id
			$('#search').on('click', function() {
				var name = $("#txtName").val();//上面搜索框的id
				table.reload('testReload', {//testReload,是上面渲染表格的id
					where : {//接口需要的两个请求参数
						'title' : name
					}
				});
			});
		});
	</script>
</body>
</html>